<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    {include file="common/head" /}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form action="" id="form" class="layui-form" method="post">
            <input type="hidden" name="store_id" value="{$info.store_id|default=0}">
            <input type="hidden" name="type" value="{$type}">

            <div class="layui-form-item">
                <label for="title" class="layui-form-label">
                    <span class="x-red">*</span>店铺名称
                </label>
                <div class="layui-input-inline">
                    <input type="number" value="{$info.title}" id="title" name="title" required=""
                           lay-verify="required" autocomplete="off" class="layui-input">

                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>唯一的店铺名
                </div>
            </div>

            <div class="layui-form-item">
                <label for="real_person" class="layui-form-label">
                    <span class="x-red">*</span>店铺责任人
                </label>
                <div class="layui-input-inline">
                    <input type="number" value="{$info.real_person}" id="real_person" name="real_person" required=""
                           lay-verify="required" autocomplete="off" class="layui-input">

                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="mobile" class="layui-form-label">
                    <span class="x-red">*</span>联系电话
                </label>
                <div class="layui-input-inline">
                    <input type="number" value="{$info.mobile}" id="mobile" name="mobile" required=""
                           lay-verify="zm" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">

                </div>
            </div>

            <div class="layui-form-item">
                <label for="email" class="layui-form-label">
                    <span class="x-red"></span>电子邮件
                </label>
                <div class="layui-input-inline">
                    <input type="email" value="{$info.email}" id="email" name="email" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">

                </div>
            </div>

            {:getRegion()}

            <div class="layui-form-item">
                <label for="address" class="layui-form-label">
                    <span class="x-red">*</span>详细地址
                </label>
                <div class="layui-input-inline" style="width: auto">
                    <input type="text" value="{$info.address}" style="width: 300px" id="address" name="address" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="详细地址">
                </div>
                <div class="layui-form-mid layui-word-aux" style="padding: 0;padding: 0 !important">
                    <a class="layui-btn" id="showIcon">获取精准坐标</a>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="latitude" class="layui-form-label">
                    <span class="x-red">*</span>店铺位置
                </label>
                <div class="layui-input-inline">
                    <div class="map" id="map" style="width: 600px; height: 400px; background: #000">

                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="longitude" class="layui-form-label">
                    <span class="x-red">*</span>经度
                </label>
                <div class="layui-input-inline" style="width: auto">
                    <input type="text" value="{$info.longitude}" id="longitude" name="longitude" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="">
                </div>
                <div class="layui-form-mid layui-word-aux">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="latitude" class="layui-form-label">
                    <span class="x-red">*</span>纬度
                </label>
                <div class="layui-input-inline" style="width: auto">
                    <input type="text" value="{$info.latitude}" id="latitude" name="latitude" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="">
                </div>
                <div class="layui-form-mid layui-word-aux">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red"></span>状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" {eq name="info['status']" value="1" }checked{/eq}
                    lay-skin="primary" title="正常" checked="">
                    <input type="radio" name="status" value="0" {eq name="info['status']" value="0" }checked{/eq}
                    lay-skin="primary" title="禁用">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="ok" class="layui-form-label">
                </label>
                <button id="ok" class="layui-btn" lay-filter="add" lay-submit="">
                    {empty name="info['id']"}
                    增 加
                    {else /}
                    修 改
                    {/empty}

                </button>
            </div>
        </form>
    </div>
</div>

<div id="idbox" style="display: none">

</div>
<script>layui.use(['form', 'layer'],
    function () {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            zm: function (value) {
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '真实姓名不能有特殊字符';
                }
            }
        });

        //监听提交
        form.on('submit(add)',
            function (data) {
                $.ajax({
                    type: "POST",
                    url: "{:url()}",
                    data: data.field,
                    success: function (result) {
                        layer.alert(result.msg, {
                            icon: 6
                        }, function () {
                            xadmin.close();
                            xadmin.father_reload();
                        });
                    },
                    error: function (data) {
                        layer.alert(result.msg, {
                            icon: 2
                        }, function () {
                            xadmin.close();
                        });
                    }

                });
                return false;
            });

        layui.use('upload', function(){
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#photo' //绑定元素
                ,url: '{:url("File/upload")}' //上传接口
                ,accept: 'images' //只允许上传图片
                ,acceptMime: 'image/*' //只筛选图片
                ,before: function(obj){
                    layer.load();
                }
                ,done: function(res){
                    if(res.code){
                        $("#photo_url").attr("src",res.data.url);
                        $("#photo_input").val(res.data.url);
                    }else{
                        layer.msg(res.msg,{icon:2,time:1000});
                    }
                    layer.closeAll('loading');
                }
                ,error: function(res){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });
        });


    });
</script>

<script>
    function init() {
        var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        var map = new qq.maps.Map(document.getElementById("map"), myOptions);
    }

    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://map.qq.com/api/js?v=2.exp&key={:getSystem('map_key')}&callback=init";
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>

</body>

</html>
